<template>
    <view class="main">
        <HeaderBar title="定制路线" navBarBgc="#fdffed"></HeaderBar>
        <view class="content">
            <view class="title">定制路线</view>
            <view class="form">
                <wd-form ref="form" :model="model">
                    <view class="cell">
                        <view class="label">姓名</view>
                        <wd-input
                            clearable
                            v-model="model.name"
                            placeholder="请输入您的姓名"
                        />
                    </view>
                    <view class="cell">
                        <wd-drop-menu>
                            <wd-drop-menu-item v-model="model.countryCode" :options="option" @change="handleChange" />
                        </wd-drop-menu>
                        <wd-input
                            prop="phone"
                            clearable
                            v-model="model.phone"
                            placeholder="请输入您的联系电话"
                            :maxlength="11"
                            type="number"
                        />
                    </view>
                    <view class="texts">
                        <view class="label">定制需求</view>
                        <wd-textarea v-model="model.demand" clearable placeholder="可简单描述您的需求" />
                    </view>
                    <button class="btn" @click="handleSubmit">马上为我定制</button>
                    <view class="footer">
                        了解如何定制旅行方案
                        <wd-icon name="arrow-right"></wd-icon>
                    </view>
                </wd-form>
            </view>  
        </view>
        <view class="swiper">
            <wd-swiper :list="swiperImgList" autoplay v-model:current="current" value-key="imgUrl" height="388rpx" @click="handleClick" @change="onChange"></wd-swiper> 
        </view>
        <view class="btns">
            <view class="bt" @click="handleSubmit">定制</view>
            <view class="bt" @click="goToOrder">订单</view>
        </view>
           
    </view>
</template>

<script lang="ts" setup>
defineOptions({
  options: {
    styleIsolation: 'shared'
  }
})
import HeaderBar from "@/components/HeaderBar/index.vue";
import { addCustomized } from "@/premiumRouteSubPack/api/index"
import { ref ,onMounted} from 'vue';
import {styleSettingContent} from "@/api/system";

const model = ref({
  name: '',
  phone:'',
  demand: '',
  countryCode:0,
});

const option = ref<Record<string, any>[]>([
  { label: '+86', value: 0 },
  { label: '+10', value: 1 },
  { label: '+16', value: 2 }
])
onMounted(() => {
	getBanner();
});
const handleChange = () =>{
    console.log(15155);
    
}
const current = ref(0)
const swiperImgList = ref([])
//点击banner
const handleClick = ()=>{
	console.log('点击banner')
}
//切换banner
const onChange = ()=>{
	console.log('点击banner11')
}
const handleSubmit =()=>{
    const data = {
        contactName: model.value.name,
        contactPhone: model.value.phone,
        countryCode: model.value.countryCode,
        memo: model.value.demand
    };
    addCustomized(data).then(res=>{
        uni.navigateTo({
            url: '/premiumRouteSubPack/pages/orderStatus/index' 
        });
    })
}
const goToOrder = ()=>{
    uni.navigateTo({
        url: '/premiumRouteSubPack/pages/orderList/index' 
    });
}
//获取定制路线banner
const getBanner =async()=>{
	try{
		const res = await styleSettingContent({codes:"CUSTOMIZED_BANNER"})
		const { CUSTOMIZED_BANNER } = res
		swiperImgList.value = CUSTOMIZED_BANNER
	}catch(error){
	}finally{}
  }
</script>

<style lang="scss" scoped>
.main{
    background: #fdffeb;
    height: 100vh;
    .content{
        padding: 45rpx 28rpx 0;
        border-radius: 10rpx;
        .title{
            color: #fff;
            background: #1B9C61;
            height: 134rpx;
            text-align: center;
            line-height: 100rpx;
            font-size: 40rpx;
            font-weight: bold;
            border-radius: 10rpx;
        }
        .form{
            position: relative;
            top: -30rpx;
            background: #fff;
            border-radius: 10rpx;
            padding: 35rpx;
        }
        .label{
            font-size: 32rpx;
            font-weight: bold;
            color: #2b2b24;
            margin-right: 30rpx;
        }
        .cell{
            display: flex;
            align-items: center;
            padding: 10rpx 0;
            &:nth-child(2){
                border: 1rpx solid #c0c2b3;
                border-radius: 10rpx;
                margin-top: 20rpx;
            }
            :deep(.wd-input){
                flex: 1;
                &::after{
                    display: none;
                }
            }
            :deep(.wd-drop-menu__list){
                background-color: transparent;
                justify-content: space-between;
            }
            :deep(.wd-drop-menu__item){
                width: auto ; 
                min-width: max-content ; 
                flex: none ;  
                white-space: nowrap; 
                ::before{
                    display: none;
                }
            }
            :deep(.wd-drop-menu__item-title){
                width: max-content;
                padding:0 30rpx;
                border-right: 1rpx solid #c0c2b3;
                margin-right: 20rpx;
            }
            :deep(.wd-drop-menu__item-title-text){
                font-size: 26rpx;
            }
            :deep(.wd-icon){
                font-size: 40rpx !important;
            }
            :deep(.is-active){
                ::after{
                    display: none;
                }
            }
        }
        .texts{
            margin-top: 30rpx;
            :deep(.wd-textarea){
                border: 1rpx solid #c0c2b3;
                height: 160rpx;
                border-radius: 10rpx;
                margin-top: 30rpx;
                .wd-textarea__value{
                    height: 100%;
                    width: 100%;
                }
                .wd-textarea__inner{
                    height: 100%;
                    width: 100%;
                }
            }
        }
        .btn{
            width: 330rpx;
            height: 84rpx;
            border-radius: 10rpx;
            background: #1B9C61;
            margin-top: 40rpx;
            font-size: 32rpx;
            color: #fff;
            font-weight: bold;
        }
        .footer{
            font-size: 28rpx;
            color: #AA5413;
            text-align: center;
            margin-top: 20rpx;
        }
    }
    .swiper{
        padding: 28rpx;
        padding-bottom: 200rpx;
    }
    .btns{
        display: flex;
        align-items: center;
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        padding-bottom: env(safe-area-inset-bottom);
        border: 1rpx solid #C0C2B3;;
        background: #fdffeb;
        .bt{
            flex: 1;
            height: 100rpx;
            line-height: 100rpx;
            background: #fff;
            color: #1B9C61;
            font-size: 32rpx;
            font-weight: bold;
            border-radius: none;
            border: none;
            text-align: center;
            &:nth-child(2){
                background: #EEF0DF;
                color: #2b2b24;
            }
        }
    }
}
</style>